<template>
    <el-dialog v-model="show" title="详情" width="45%" align-center @close="handleClose">
        <div class="flex-s-c">
            <div>收款卡名称：{{ props.initList.accountName }}</div>
            <div>所属公司： {{ props.initList.companyName }}</div>
        </div>
        <div class="flex-s-c mt20">
            <div>剩余余额：{{ props.initList.balance }}</div>
            <el-col :span="1.5"><el-button plain type="primary" icon="DocumentDelete">下载EXCEL</el-button></el-col>
        </div>


        <div class="container_table mt20">
            <el-table :data="props.initList.dataList" style="width: 100%">
                <el-table-column prop="date" label="日期" />
                <el-table-column label="类型">
                    <template #default="scope">
                        <div v-if="scope.row.paymentType === '1'">支出</div>
                        <div v-else>收入</div>
                    </template>
                </el-table-column>
                <el-table-column prop="purposeType" label="摘要/款项来源">
                    <template #default="scope">
                        {{ receive_summay.filter((item: any) => item.value === scope.row.purposeType)[0].label }}
                    </template>
                </el-table-column>
                <el-table-column prop="paymentAmount" label="金额">
                    <template #default="scope">
                        <div :style="scope.row.paymentType === '1' ? 'color:#F75F51' : 'color:#52CC6F'">
                            {{ scope.row.paymentType === '1' ? '-' : '+' }}{{ scope.row.paymentAmount }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createByName" label="发起人" />
                <el-table-column prop="createByName" label="经办人" />
                <el-table-column label="凭证">
                    <template #default="scope">
                        <el-image lazy :src="scope.row.fileUrl" :preview-src-list="[scope.row.fileUrl]" />
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const { receive_summay } = toRefs<any>(proxy?.useDict('receive_summay'));

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.flex-s-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container_table {
    width: 100%;
    max-height: 300px;
    overflow-x: auto;
}
</style>